<template>
	<view class="pg-30">
		<view :class="[goodsStatus && 'input_head', scrollTopStatus && 'top']" style="transition: all 0.3s;">
			<view :class="[goodsStatus && 'px-30']">
				<u-search placeholder="请输入要搜索得商品" focus animation v-model="keyword"></u-search>
			</view>
			<view class="d-flex-yCenter jfy-sa py-20" v-if="goodsStatus">
				<text @tap='typeSwitching(index)' :class="actve==index?'actve':''" v-for="(item,index) in ['综合排序','价格']"
					:key='index'>{{item}}</text>
			</view>
		</view>
		<view class="sousuolieshi" v-if="!goodsStatus">
			<view class="d-flex-yCenter-sb pt-30">
				<text class="font-30 font-w">搜索历史</text>
				<image @tap='deleteSearch' v-if="search.length" src="../../static/icon/delete%20(2).png" mode=""></image>
			</view>
			<view class="lieshi d-flex-yCenter flex-w mt-30">
				<text @tap='keyword=item' v-for="(item,index) in search" :key='item.id'>{{item}}</text>
			</view>
		</view>
		<view class=" nav" v-else style="margin-top: 95rpx;">
			<!-- 商品列表 -->
			<view class="d-flex aling-centen flex-w jfy-sb">
				<navigator 
					:url="'/pages/prot_details/prot_details?cid='+item.id" 
					hover-class="hover-class" class="commodity-modul mt-20" 
					v-for="(item,index) in goodsData" :key='index'>
					<view class="position-r">
						<text class="discount" v-if="item.flag && item.flag>0">{{item.flag}}折</text>
						<image :src="item.logo" mode=""></image>
					</view>
					<text class="text-overflow2 font-28 mt-10 font-w">{{item.title}}</text>
					<view class="d-flex font-28 mt-10">
						<text class="Price-color">￥{{item.price_selling}}</text>
						<text class="text-decoration ml-20">￥{{item.price_market}}</text>
					</view>
				</navigator>
			</view>
			<!-- 暂无商品 -->
			<view class="d-flex-yCenter jfy-center" style="margin-top: 200rpx;" v-if="!goodsData.length">
				<image style="width: 493rpx; height: 288rpx;" src="../../static/icon/null.png" mode=""></image>
			</view>
			<view class="py-30 text-al-center" v-if="goodsData.length>=10">
				<u-loadmore icon :load-text='loadText' :status="status" @loadmore="addRandomData"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http_mall_goods_lst
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				// 底部加载loder
				status: 'loading', //status对应的值loadText的key就是显示内容
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '哦豁！着 没有数据了'
				},
				actve: 0,
				keyword: '',
				search: [],//搜索历史
				goodsData:[],
				sort: ['default', 'price_desc'], //排序方式 0 综合排序 1 价格降序
				time: null,
				page:1,
				last_page:null,
				scrollTop:0,
				scrollTopStatus:false,// 往上为true 往下false
				goodsStatus: false
			}
		},
		watch: {
			keyword(value) {
				clearTimeout(this.time)
				this.time = setTimeout(() => {
					this.getGoodsData()
				}, 500)
			},
			last_page(value){
				if(this.page==this.last_page || value==0)this.status='nomore'
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'hk_search',
				success: (res) => this.search = [...res.data]
			});
		},
		methods: {
			getGoodsData(type){
				!type ? this.page=1:''
				http_mall_goods_lst({
					data:{
						page:this.page,
						limit:10,
						keyword:this.keyword,
						sort:this.sort[this.actve]
					}
				}).then(res=>{
					this.goodsStatus=true
					this.last_page=res.data.last_page
					type?this.goodsData=this.goodsData.concat(res.data.data):this.goodsData=res.data.data
					!type && this.dataSuccess()
					if(!type){
						this.scrollTopStatus=false
						uni.pageScrollTo({
						    scrollTop: 0,
						    duration: 300
						});
					}
				})
			},
			// 添加搜索历史，获得商品数组得length
			dataSuccess() {
				let e = this.goodsData.length
				if (e && this.keyword.trim() && this.search.indexOf(this.keyword)==-1) {
					console.log(this.keyword);
					this.search.push(this.keyword)
					uni.setStorage({
						key: 'hk_search',
						data: this.search,
					});
				}
			},
			// 类型切换
			typeSwitching(index){
				if(this.actve==index)return
				this.actve=index
				this.getGoodsData()
			},
			// 清楚搜索记录
			deleteSearch() {
				uni.showModal({
					title: '提示',
					content: '确认清除历史搜索记录吗',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'hk_search',
								success: (res) => this.search = []
							});
						}
					}
				});
			},
		},
		// 页面滚动
		onPageScroll(e){
			if(e.scrollTop<105)return
			if(e.scrollTop>this.scrollTop){
				console.log('上划');
				this.scrollTopStatus=true
			}else{
				this.scrollTopStatus=false
				console.log('下滑');
			}
			this.scrollTop=e.scrollTop
		},
		// 上拉触底
		onReachBottom() {
			if(this.page==this.last_page || value==0)this.status='nomore'
			if(this.page==this.last_page || this.last_page==0)return
			this.page++
			this.getGoodsData(true)
		},
	}
</script>

<style lang="scss">
	.input_head{
		margin-top: -1rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 99;
		.actve {
			color: $color-zt;
		}
	}
	.top{
		top: -66rpx !important;
	}
	.title {
		input {
			background: #ddd;
			height: 60rpx;
			border-radius: 30prx;
		}
	}

	.sousuolieshi {
		image {
			width: 30rpx;
			height: 30rpx;
		}

		.lieshi {
			text {
				min-width: 100rpx;
				line-height: 50rpx;
				font-size: 25rpx;
				padding: 0 30rpx;
				margin-right: 20rpx;
				text-align: center;
				background: #F0F0F0;
				border-radius: 12rpx;
			}
		}
	}
	.commodity-modul {
		width: 335rpx;
	
		.discount {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			display: inline-block;
			padding: 6rpx 10rpx;
			border-radius: 8rpx;
			color: #fff;
			background: #FF890B;
		}
	
		image {
			width: 335rpx;
			height: 280rpx;
			border-radius: 12rpx;
		}
	}
</style>
